<template>

  <div>

    <div style="width: 300px;height: 470px;background-color: rgba(0,0,0,0.45);margin:100px auto;text-align: center;border-radius: 10px">
      <p style="font-size: 28px;font-family: '楷体';padding-top: 20px">广告申请</p>
      <hr style="width: 90%;height: 0.01px"/>



      <div >
        <div class="hello">
          <div>
            <p style="width: 100%;margin-left: 70px; text-align: left">请上传广告图片</p>
            <!--<h1>{{ msg }}</h1>-->
            <form>
              <input type="file" @change="getFile($event)">
              <button class="button button-primary button-pill button-small" @click="submit($event)">提交</button>
            </form>
          </div>
          <div>
            <!--<img class="hello" src="../assets/logo.png" style="width: 500px;height: 500px">-->



          </div>

        </div>

        <div style="margin-top: 20px">
          <div style="width: 70%;margin-top: 30px;margin-left: 50px">
          <span class="demonstration">工作室属性</span>
          <el-cascader
            :options="options"
            v-model="selectedOptions"
            @change="handleChange">
          </el-cascader>
        </div>

          <el-input v-model="InputName" placeholder="请输入项目或工作室id号" style="width: 70%;margin-top: 30px"></el-input>


        </div>
        <div style="margin-top: 20px">
          <!--<button @click="register">广告申请</button>-->
          <el-button  size="small" @click="register">广告申请</el-button>
        </div>

      </div>

    </div>
  </div>

</template>





<script>

  export default {
    name: "SignUp",

    data() {
      return {
        InputName:'',
        photoUrl:'',
        options: [
          {
            value: '工作室',
            label: '工作室',
          },
          { value: '项目',
            label: '项目',}

        ],
        selectedOptions: [],

      }
    },
    watch:{

    },
    methods:{

      getFile: function (event) {
        this.file = event.target.files[0];
        console.log(this.file);
      },
      submit: function (event) {
        //阻止元素发生默认的行为
        var _this=this
        event.preventDefault();
        let formData = new FormData();
        // console.log(formData)
        formData.append("file", this.file)
        axios.post('/upload/singlefile', formData)
          .then(function (response) {
            //   console.log(response)
            alert(response.data);
            var a= response.data;
            //  var e=a.split("*");
            //console.log(e[1])
            _this.photoUrl=a;

            // window.location.reload();
          })
          .catch(function (error) {
            alert("上传失败");
            console.log(error);
            //window.location.reload();
          });
      },
      register(){
        var hh=this.selectedOptions.toString()
          axios.post('/user/addAd',{
            aid:this.InputName,
          role:hh,
          photo: this.photoUrl

          }).then((response) => {

            if(response.data.states==800){
              console.log(response)
              this.$notify({
                title: '成功',
                message: '申请成功',
                type: 'success',
                duration:2000
              });
              this.$router.replace('/Index');
            }  else{
              this.$notify.error({
                title: '错误',
                message: '错误',
                type: 'warning',
                duration:0
              });
            }
          }).catch((response)=>{

          })
        }



    },

  }
</script>

<style scoped>

</style>
